import { Navigate, useRoutes } from 'react-router-dom'



/* 
之前的引入方式
import NotFound from '../components/404'
import Login from '../pages/Login'
import Main from '../pages/Main'
import About from '../pages/Main/About'
import Home from '../pages/Main/Home'
import List from '../pages/List' */



/* 
之前的引入方式生产路由表
const routes = [
    {
        path: "/login",
        element: <Login />,
    },
    {
        path: "/main",
        element: <Main />,
        children: [
            {
                path: "/main/about",
                element: <About />,
            },
            {
                path: "/main/home",
                element: <Home />,
                children: [
                    {
                        path: "/main/home/music",
                        element: <List />,
                    },
                    {
                        path: "/main/home/news",
                        element: <List />,

                    }
                ]

            }
        ]
    },
    {
        path: "/",
        element: <Navigate to="/login" />
    },
    {
        path: "*",
        element: <NotFound />
    },
] */



import { lazy,Suspense } from 'react'
//路由懒加载方式
// import NotFound from '../components/404'
const NotFound = lazy(() => import('../components/404'))
// import Login from '../pages/Login'
const Login = lazy(() => import('../pages/Login'))
// import Main from '../pages/Main'
const Main = lazy(() => import('../pages/Main'))
// import About from '../pages/Main/About'
const About = lazy(() => import('../pages/Main/About'))
// import Home from '../pages/Main/Home'
const Home = lazy(() => import('../pages/Main/Home'))
// import List from '../pages/List'
const List = lazy(() => import('../pages/List'))

/* 简单封装一下<Suspense fallback={<div>Loading...</div>}>
<Login />
</Suspense> */
const load = (Comp)=>{
    //用Suspense把所有路由跳转包起来，fallback是等待的时候的显示
    return <Suspense fallback={<div>Loading...</div>}>
              <Comp />
            </Suspense>
}

const routes = [
    {
        path: "/login",
        element: load(Login),
    },
    {
        path: "/main",
        element:load(Main) ,
        children: [
            {
                path: "/main/about",
                element:load(About) ,
            },
            {
                path: "/main/home",
                element:load(Home) ,
                children: [
                    {
                        path: "/main/home/music",
                        element:load(List) ,
                    },
                    {
                        path: "/main/home/news",
                        element:load(List) ,

                    }
                ]

            }
        ]
    },
    {
        path: "/",
        element: <Navigate to="/login" />
    },
    {
        path: "*",
        element:load(NotFound)
    },
]

/* const routes = [
    {
        path: "/login",
        element: <div>
            <Suspense fallback={<div>Loading...</div>}>
                <Login />
            </Suspense>
        </div>,
    },
    {
        path: "/main",
        element: <Suspense fallback={<div>Loading...</div>}>
            <Main />
        </Suspense>,
        children: [
            {
                path: "/main/about",
                element: <Suspense fallback={<div>Loading...</div>}>
                    <About />
                </Suspense>,
            },
            {
                path: "/main/home",
                element: <Suspense fallback={<div>Loading...</div>}>
                    <Home />
                </Suspense>,
                children: [
                    {
                        path: "/main/home/music",
                        element: <Suspense fallback={<div>Loading...</div>}>
                            <List />
                        </Suspense>,
                    },
                    {
                        path: "/main/home/news",
                        element: <Suspense fallback={<div>Loading...</div>}>
                            <List />
                        </Suspense>,

                    }
                ]

            }
        ]
    },
    {
        path: "/",
        element: <Navigate to="/login" />
    },
    {
        path: "*",
        element: <Suspense fallback={<div>Loading...</div>}>
            <NotFound />
        </Suspense>
    },
] */

export default routes   //方式1


//方式2 这样的写法,认为定义了 GetRoutes 组件,这个组件就是根据路由表生成的 路由配置结构
export const GetRoutes = () => {
    return useRoutes(routes)
}

//方式3  自定义hooks
export const useMyRoutes = () => {
    //在自定义hooks中是可以使用hook
    return useRoutes(routes)
}